<template>
<div class="task" :class="{activeCard:selectCard==index }">
   <div>任务编号：{{taskId}}</div>
   <div>位置：{{position}}</div>
   <div>{{taskType}}</div>
   <!-- <p>求救人数：{{peopleNum}}</p> -->
   <p>描述：{{canBeChangedDesc}}</p>
   <div class="btn">
      <el-button type="success" plain @click="selectRescueGroup" size="small">选择救援队</el-button>
      <el-button type="primary" plain @click="unfoldHideInput" size="small">更改描述</el-button>
      <el-button type="danger" plain @click="endTask" size="small">结束任务</el-button>
   </div>
   <transition name="slide-fade">
   <div class="hideInput" v-if="changeDescriptionFlag">
    <el-input v-model="bindDescription" placeholder="请输入描述"
         clearable type="textarea" autosize
    ></el-input>
    <el-button type="success" icon="el-icon-check"
     circle size="small" @click="updateDescription"></el-button>
   </div>
   </transition>
</div>
</template>
<script>
import { getRequest } from "../utils/api";
import { putRequest } from "../utils/api";
import "../css/TaskCard.css"
import { NODE_ENV } from "../../config/prod.env";
import axios from "axios";

export default {
  data() {
    return {
        changeDescriptionFlag:false,
        bindDescription:"",
        canBeChangedDesc:''
    };
  },
  computed:{
    eventStatus(){
        if(this.status==1){return "未审核"}
        else return "已审核"
    }
  },
  mounted: function () {
      this.canBeChangedDesc=this.describe
  },
  methods: {
    endTask(){
      //axios的删除后回调
      console.log(this.taskId);
       this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('/task/endTask?taskType=flood&taskId='+this.taskId).then((resp) => {
            if (resp.status == 200) {
                this.$message({
                message: '删除成功',
                type: 'success'
                });
                this.$emit("deleteCallBack");
            }
        },(error)=>{
                this.$message({
                message: error,
                type: 'warning'
                });
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    updateDescription(){
      console.log(this.bindDescription);
      axios.get('/manager/updateTaskDescription?taskId='+this.taskId+'&taskType=flood&description='+this.bindDescription).then((resp) => {
            if (resp.status == 200) {
                this.$message({
                message: '更改成功',
                type: 'success'
                });
                this.unfoldHideInput()
                this.canBeChangedDesc=this.bindDescription
                this.bindDescription=""
            }
        },(error)=>{
                this.$message({
                message: error,
                type: 'warning'
                });
        })
    },
    unfoldHideInput(){
      this.changeDescriptionFlag=!this.changeDescriptionFlag
    },
    selectRescueGroup(){
      this.$emit("selectRescue",this.describe,this.taskId);
    },
    examine(){
        console.log("执行");
        console.log(this.index);
        this.$emit("deleteEvent", this.index);
    }
  },
  emits: ["deleteEvent","selectRescue","deleteCallBack"],
  props:["index","taskId","taskType","peopleNum","position","describe","selectCard"]
};
</script>
